<template>
  <view class="container">
    <!-- 轮播图 -->
    <div class="swiper_container" v-if="bannerList.length">
      <swiper class="swiper" autoplay :interval="5000" circular>
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.imageUrl" />
        </swiper-item>
      </swiper>
    </div>
    <!-- 秒杀 时间段 -->
    <scroll-view scroll-x="true" class="sec_top"
      v-if="activityType === 'SECKILL' || activityType === 'SECKILL_ZONE'">
      <view class="item" v-for="(item, index) in limitedTime" :key="index"
        @click="handleList(item, index)">
        <view class="item-content">
          <text :class="active === index ? 'reds' : 'default'">
            {{ item.startName || '' }}{{ item.timeLine }}
          </text>
          <text :class="active === index ? 'redBorder' : 'defaultB'">{{ item.cotent }}</text>
        </view>
      </view>
    </scroll-view>
    <!-- 中间列表 -->
    <div class="section">
      <div class="sec_center" v-for="(item, index) in goodsList" :key="index">
        <div class="list_top">
          <div class="imgs_list">
            <image v-if="item.inform" :src="item.inform" class="img inform_announcement"
              @click="details(item)"></image>
            <image class="img" :class="item.quantity ? '' : 'sellOut_container-img'"
              :src="item.original ? item.original : staticUrl() + '/home/defaultImg.png'"
              @click="details(item)" />
            <div class="custom_box" v-if="hasToken() && item.estimated && item.estimated.price">
              <img class="img1" :src="staticUrl() + '/home/orderInfo1.png'" />
              <img class="img2" :src="staticUrl() + '/home/orderInfo.png'" />
              <div class="copywriting">{{ item.estimated.describe }}</div>
              <div class="custom_content">
                <div class="custom_prices">
                  <div class="txt">{{ item.estimated.title }}</div>
                  <div class="price">
                    <text>￥</text>
                    {{ item.estimated.price.toFixed(2) }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="content_list">
            <li @click="details(item)" class="goodsName singleRowEllipsis">{{ item.goodsName }}</li>
            <li @click="details(item)">
              <span class="simpleSpecs singleRowEllipsis">{{ item.simpleSpecs }} </span>
              <span class="expirationDate singleRowEllipsis">{{ item.expirationDate }}</span>
            </li>
            <li @click="details(item)" class="manufacturer singleRowEllipsis">
              {{ item.manufacturer }}
            </li>
            <li class="activityType">
              <span class="ephedrine" v-if="item.ephedrine">含麻</span>
              <span v-for="(n, m) in item.promotionMethods" :key="m"
                :class="n.promotionType === 'COUPON' ? 'voucher' : 'seckillType'">
                {{ n.promotionType === 'COUPON' ? '券' : n.name }}
              </span>
            </li>
            <li v-if="hasToken() && item.promotionPrice && item.promotionPrice !== -1"
              class="promotionPrice">
              <span @click="details(item)">
                <text>￥</text>
                <text>{{ item.promotionPrice.toFixed(2) }}</text>
                <text>/{{ item.goodsUnit }}</text>
              </span>
              <span @click="addShoppingCart(item)" v-if="
                  activityType === 'SECKILL' ||
                  (activityType === 'SECKILL_ZONE' && item.promotionPrice === -1)
                ">
                {{ showText }}
              </span>
              <img :src="staticUrl() + '/home/addCart.png'" @click="addShoppingCart(item)" v-else />
            </li>
            <li class="loginSow" v-if="!hasToken()">登录可见</li>
            <li class="loginSow singleRowEllipsis" v-if="hasToken() && !item.promotionPrice">
              资质审核通过可见
            </li>
            <li class="loginSow singleRowEllipsis" v-if="hasToken() && item.promotionPrice === -1">
              敬请期待
            </li>
          </div>
        </div>

        <div class="list_bottom" @click="getRuleData(item)" v-if="hasToken() && item.rules.length">
          <div>{{ item.rules[0] }}</div>
          <div>
            <uni-icons :type="item.arrow" size="15" color="#8D8D8D"></uni-icons>
          </div>
        </div>
      </div>
    </div>
    <!-- 侧边栏 -->
    <div class="footer">
      <div class="car_top" @click="goToCar">
        <uni-icons type="cart" size="30" color="#fff"></uni-icons>
      </div>
      <div class="car_bottom" @click="backTop">
        <uni-icons type="arrow-up" size="30" color="#fff"></uni-icons>
      </div>
    </div>
    <!-- 弹框 -->
    <!-- 活动规则 -->
    <div class="bgc" @click=";(ruleStatus = false), (arrow.arrow = 'bottom')" v-if="ruleStatus">
      <div class="activityRules" @click.stop="">
        <div class="rulesTitle">
          <h2>活动规则</h2>
          <uni-icons type="closeempty" size="16" color="#8D8D8D"
            @click=";(ruleStatus = false), (arrow.arrow = 'bottom')"></uni-icons>
        </div>
        <div class="limits">
          <div class="reduction">限购</div>
          <div class="reductionNum">
            <div v-for="(item, index) in rule" :key="index">{{ item }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 加入购物车 -->
    <div class="bgc" @click.stop="addCar = false" v-if="addCar">
      <div class="addCar" @click.stop="">
        <div class="addNum">
          <div class="reduce" @click.stop="decrease"><i></i></div>
          <input type="number" v-model.number="num" @blur="changeNum" @click.stop="" />
          <div class="plus" @click.stop="num += pack"><span></span><span></span></div>
        </div>
        <div class="sure" @click.stop="sureNum()">确定</div>
      </div>
    </div>
  </view>
</template>

<script>
import dicts from '@/config/dicts.js'
import {
  getAppBanner,
  getNowSeckill,
  getActivityList,
  getGoods,
  getCarts
} from '@/api/activity/activity.js'

export default {
  data () {
    return {
      activityType: '',
      bannerList: '',
      limitedTime: [],
      active: '',
      goodsList: [],
      showText: '',
      showcar: false,
      addCar: false,
      currentGoods: '',
      num: '',
      pack: '',
      rule: [],
      ruleStatus: false,
      pageNumber: 1,
      pageSize: 10,
      arrow: ''
    }
  },
  onLoad (e) {
    this.activityType = e.promotionType
    // this.url = e.promotionGoodsPath
    uni.setNavigationBarTitle({ title: e.title })
    this.getBanner()
    this.getList()
  },
  onPullDownRefresh () {
    this.pageNumber = 1
    this.getBanner()
    this.getList()
    uni.stopPullDownRefresh()
  },
  onReachBottom () {
    this.getData()
  },
  methods: {
    judge (item) {
      let a = false
      item.promotionMethods.forEach(i => {
        if (i.promotionType === 'COUPON' || i.promotionType === 'FULL_DISCOUNT') {
          a = true
        } else {
          a = false
        }
      })
      return a
    },
    getBanner () {
      getAppBanner({ clientType: 'APP', pageSign: this.activityType }).then(res => {
        if (res.code === 200) {
          this.bannerList = res.data
        }
      })
    },
    decomposeTime (t) {
      let now = new Date(t)
      return now.getUTCMonth() + 1 + '/' + now.getDate() + ' '
    },
    // 显示列表
    getList () {
      if (this.activityType === 'SECKILL' || this.activityType === 'SECKILL_ZONE') {
        getNowSeckill(dicts.activity_type[this.activityType]).then(res => {
          this.limitedTime = res.data
          if (this.limitedTime.length) {
            let url = ''
            this.limitedTime.forEach((i, j) => {
              if (!i.distanceStartTime && !i.distanceEndTime) {
                this.$set(i, 'cotent', '已结束')
                this.showcar = false
              }
              if (!i.distanceStartTime && i.distanceEndTime) {
                url = i.promotionGoodsPath
                this.handleList(i, j)
                this.$set(i, 'cotent', '抢购中')
                this.showcar = true
              }
              if (i.distanceStartTime && i.distanceEndTime) {
                this.$set(i, 'cotent', '即将开始')
                this.$set(i, 'startName', this.decomposeTime(i.startTime * 1000))
                this.showcar = false
              }
            })
            if (!url) {
              this.handleList(this.limitedTime[0], 0)
            }
          }
        })
      } else {
        getActivityList(dicts.activity_type[this.activityType]).then(res => {
          console.log(res)
          if (!res.data.distanceStartTime && !res.data.distanceEndTime) {
            this.showcar = false
          }
          if (!res.data.distanceStartTime && res.data.distanceEndTime) {
            this.handleList(res.data, 0)
            this.showcar = true
          }
          if (res.data.distanceStartTime && res.data.distanceEndTime) {
            this.showcar = false
          }
        })
      }
    },
    // 点击出现当前的活动
    handleList (data, index) {
      this.url = data.promotionGoodsPath
      this.title = data.promotionName
      this.active = index
      if (!data.distanceStartTime && !data.distanceEndTime) {
        this.showText = '已结束'
        this.showcar = false
      }
      if (!data.distanceStartTime && data.distanceEndTime) {
        this.showText = '加入购物车'
        this.showcar = true
      }
      if (data.distanceStartTime && data.distanceEndTime) {
        this.showText = '即将开始'
        this.showcar = false
      }
      // 限时秒杀商品
      getGoods(this.url, {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }).then(res => {
        res.data.records.forEach(i => {
          this.$set(i, 'arrow', 'bottom')
        })
        this.goodsList = res.data.records
        this.pages = res.data.pages
      })
    },
    // 详情
    details (item) {
      uni.navigateTo({
        url: '/pages/goodsInfo/index?id=' + item.skuId
      })
    },
    // 点击加入购物车
    addShoppingCart (item) {
      if (this.showText !== '加入购物车') return

      this.addCar = true
      this.currentGoods = item
      this.num = item.pack
      this.pack = item.pack
    },
    // 减法判断
    decrease () {
      if (this.num > this.pack) this.num -= this.pack
    },
    changeNum () {
      this.num % this.pack < this.pack
        ? (this.num = parseInt(this.num / this.pack) * this.pack)
        : ''
      this.num ? '' : (this.num = this.pack)
    },
    // 确定
    sureNum () {
      getCarts({
        num: this.num,
        skuId: this.currentGoods.skuId
      })
        .then(res => {
          if (res.code === 200) {
            uni.showToast({
              icon: 'none',
              title: '成功',
              mask: true
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg,
              mask: true
            })
          }
        })
        .finally(() => {
          this.addCar = false
        })
    },
    // 打开活动规则
    getRuleData (data) {
      this.ruleStatus = true
      this.rule = data.rules
      this.arrow = data
      this.arrow.arrow = 'top'
    },
    // 跳购物车
    goToCar () {
      uni.switchTab({
        url: '/pages/shoppingCarts/index'
      })
    },
    // 置顶
    backTop () {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    },
    // 分页
    getData () {
      if (this.pages > this.pageNumber) {
        this.pageNumber++
        getGoods(this.url, {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        }).then(res => {
          res.data.records.forEach(i => {
            this.$set(i, 'arrow', 'bottom')
          })
          this.goodsList.push(...res.data.records)
        })
      } else {
        uni.showToast({
          icon: 'none',
          title: '没有了',
          mask: true
        })
      }
    },
    getActivityType () {
      return dicts.goods_promotionType[this.activityType]
    }
  }
}
</script>

<style lang="scss" scoped>
img {
  display: block;
}

.container {
  min-height: 100vh;
  background: #f9f9f9;
}

.swiper_container {
  .swiper {
    height: 319rpx;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.sec_top {
  // margin-top: 30.56rpx;
  margin-left: 25rpx;
  margin-right: 25rpx;
  padding-top: 34.72rpx;
  padding-bottom: 2.78rpx;
  width: calc(100% - 50rpx);
  white-space: nowrap;

  .item {
    min-width: 22%;
    display: inline-block;
    text {
      white-space: nowrap;
    }
    .item-content {
      // width: 99rpx;

      text-align: center;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;

      .default {
        font-size: 35rpx;
        font-weight: bold;
      }

      .defaultB {
        font-size: 25rpx;
        color: #8d8d8d;
        margin-top: 16.67rpx;
        padding: 2rpx 0;
        border-radius: 7rpx;
      }

      .reds {
        font-size: 35rpx;
        font-weight: bold;
        color: #f0211c;
      }

      .redBorder {
        color: #fff;
        background: linear-gradient(-31deg, #ec1818, #fc4a27);
        font-size: 25rpx;
        margin-top: 16.67rpx;
        padding: 2rpx 0;
        border-radius: 7rpx;
      }
    }
  }
}

.section {
  padding-bottom: 50rpx;
}

.sec_center {
  margin: 25rpx;
  background: #fff;
  border-radius: 11rpx;

  .list_top {
    display: flex;

    .imgs_list {
      position: relative;
      // margin: 24.31rpx 36.11rpx 29.14rpx 24.31rpx;
      margin: 10rpx 36.11rpx 10rpx 24.31rpx;

      .img {
        width: 236rpx;
        height: 236rpx;
        margin: 18.75rpx 18.06rpx 18.06rpx 18.75rpx;
      }

      .custom_box {
        width: 100%;
        height: 65rpx;
        position: absolute;
        left: 0;
        bottom: 0;

        .img1 {
          width: 134rpx;
          height: 65rpx;
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: 1;
        }

        .img2 {
          width: 264rpx;
          height: 45rpx;
          position: absolute;
          left: 0;
          bottom: 0;
        }

        .copywriting {
          width: 130rpx;
          position: absolute;
          right: 10rpx;
          bottom: 8rpx;
          font-size: 17rpx;
          color: #e30e0e;
          text-align: center;
        }

        .custom_content {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;

          .custom_prices {
            width: 120rpx;
            height: 65rpx;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;

            .txt {
              font-size: 19rpx;
              color: #ffffff;
              line-height: 1;
            }

            .price {
              font-size: 29rpx;
              font-weight: bold;
              color: #ffffff;
              line-height: 1;
              margin-top: 7.03rpx;

              text {
                font-size: 21rpx;
              }
            }
          }
        }
      }
    }

    .content_list {
      width: 50%;
      color: #000;
      margin: 30rpx 0;

      li {
        width: 100%;
        line-height: 1;
      }

      .goodsName {
        display: inline-block;
        font-size: 29rpx;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 15.28rpx;
      }

      .simpleSpecs,
      .expirationDate,
      .manufacturer {
        display: inline-block;
        color: #8d8d8d;
        font-size: 21rpx;
        margin-bottom: 15.97rpx;
      }

      .manufacturer {
        line-height: 1;
        margin-bottom: 15.97rpx;
        // margin: 15.97rpx 0 0 0;
      }

      .simpleSpecs {
        //   // border: 1px solid #8d8d8d;
        //   opacity: 0.8;
        //   border-radius: 6rpx;
        margin-right: 20.14rpx;
        //   padding: 2rpx 4rpx;
        //   max-width: 50%;
        //   line-height: 1;
      }

      .activityType {
        margin-top: 0;
      }

      .promotionPrice {
        position: relative;
        margin-top: 30rpx;

        span:nth-child(1) {
          display: flex;
          flex-flow: row nowrap;
          align-items: flex-end;
          color: #ef231b;
          font-weight: 500;

          text {
            line-height: 1;
          }

          text:nth-child(1) {
            font-size: 25rpx;
          }

          text:nth-child(2) {
            font-size: 33rpx;
          }

          text:nth-child(3),
          text:nth-child(4) {
            font-size: 21rpx;
            font-weight: 400;
            color: #8d8d8d;
          }
        }

        span:nth-child(2) {
          display: inline-block;
          height: 56rpx;
          line-height: 56rpx;
          font-size: 21rpx;
          color: #ffffff;
          border-radius: 28rpx;
          background: linear-gradient(-31deg, #ec1818, #fc4a27);
          padding: 0 14.58rpx;
          position: absolute;
          top: -20rpx;
          right: 20rpx;
        }

        img {
          width: 43rpx;
          height: 43rpx;
          position: absolute;
          top: -4rpx;
          right: 20rpx;
        }
      }

      .loginSow {
        font-size: 30rpx;
        font-weight: 500;
        color: #ef231b;
        line-height: 1;
        margin-top: 20rpx;
      }
    }
  }

  .list_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f9f9f9;
    font-size: 23rpx;
    font-weight: 400;
    color: #8d8d8d;
    height: 64rpx;
    padding: 0 24.31rpx;
  }
}

.footer {
  position: fixed;
  left: 25rpx;
  bottom: 27.78rpx;
  z-index: 3;

  .car_top {
    width: 93.06rpx;
    height: 93.06rpx;
    background: #aeaeae;
    border-radius: 50%;
    text-align: center;
    line-height: 96rpx;
    margin-bottom: 20.83rpx;
  }

  .car_bottom {
    width: 93.06rpx;
    height: 93.06rpx;
    background: #aeaeae;
    border-radius: 50%;
    text-align: center;
    line-height: 96rpx;
  }
}

.bgc {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;

  .activityRules {
    width: 100%;
    height: 462rpx;
    position: fixed;
    bottom: 0;
    right: 0;
    background: #ffffff;

    .rulesTitle {
      position: relative;
      height: 97.22rpx;
      line-height: 97.22rpx;
      text-align: center;
      border-bottom: 1px solid #f9f9f9;

      h2 {
        font-size: 33rpx;
        font-weight: 500;
        color: #000000;
      }

      ::v-deep .uni-icons {
        position: absolute;
        top: 0;
        right: 47.92rpx;
      }
    }

    .limits {
      padding: 58.33rpx 25rpx 0;
      display: flex;
      height: 32rpx;

      .reduction {
        display: inline-block;
        border: 1px solid #ed1b19;
        border-radius: 4rpx;
        font-size: 18rpx;
        font-weight: 400;
        color: #ed1b19;
        line-height: 1;
        padding: 4rpx 8rpx;
        margin-right: 17.36rpx;
      }

      .reductionNum {
        font-size: 25rpx;
        font-weight: 400;
        color: #8d8d8d;

        div {
          margin-bottom: 16rpx;
        }
      }
    }
  }

  .addCar {
    position: fixed;
    top: 50%;
    left: 50%;
    background: #ffffff;
    border-radius: 11rpx;
    z-index: 1000;
    width: 500rpx;
    height: 302rpx;
    transform: translate(-50%, -50%);

    .addNum {
      display: flex;
      justify-content: space-between;
      margin: 69.44rpx;
      margin-bottom: 47.22rpx;

      .reduce {
        display: inline-block;
        width: 58rpx;
        height: 58rpx;
        border: 1px solid #2871fc;
        border-radius: 8rpx;
        position: relative;

        i {
          display: inline-block;
          width: 31rpx;
          height: 1rpx;
          background: #2871fc;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    input {
      display: block;
      width: 201rpx;
      height: 58rpx;
      border: 1px solid #2871fc;
      border-radius: 8rpx;
      color: #ef231b;
      text-align: center;
    }

    .plus {
      display: inline-block;
      width: 58rpx;
      height: 58rpx;
      border: 1px solid #2871fc;
      border-radius: 8rpx;
      position: relative;

      span:nth-child(1) {
        display: inline-block;
        width: 31rpx;
        height: 1rpx;
        background: #2871fc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      span:nth-child(2) {
        display: inline-block;
        width: 1rpx;
        height: 31rpx;
        background: #2871fc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .sure {
      width: 326rpx;
      height: 58rpx;
      line-height: 58rpx;
      background: #2871fc;
      border-radius: 29rpx;
      font-size: 29rpx;
      font-weight: 400;
      color: #ffffff;
      text-align: center;

      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
